<script setup lang="ts">
import Swiper from "./component/swiper.vue";
import Footer from "./component/footer.vue";
import Advantage from "./component/advantage.vue";
import Customer from "./component/customer.vue";
import Company from "./component/company.vue";
import Product from "./product/index.vue";

defineOptions({
  name: "HaoHan"
});
</script>

<template>
  <div class="hao-han-box">
    <div class="hh-header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="0">
          <!-- <img
            style="width: 100px"
            src="/images/element-plus-logo.svg"
            alt="浩瀚天御科技"
          /> -->
        </el-menu-item>
        <div class="flex-grow-2" />
        <el-menu-item index="1">企业简介</el-menu-item>
        <el-menu-item index="3">产品</el-menu-item>
        <el-menu-item index="4">解决方案</el-menu-item>
        <el-menu-item index="5">服务</el-menu-item>
        <el-menu-item index="2">关于我们</el-menu-item>
        <div class="flex-grow-1" />
      </el-menu>
    </div>
    <div class="hh-content">
      <Swiper />
      <Company />
      <Product />
      <Advantage />
      <Customer />
    </div>
    <Footer />
  </div>
</template>

<style lang="scss" scoped>
.flex-grow-2 {
  flex-grow: 4;
}
.flex-grow-1 {
  flex-grow: 1;
}
</style>
